<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>webgl绘画一个三角形</title>
</head>

<body>

  <canvas id="canvas"></canvas>
</body>
<script>
  const canvas = document.getElementById('canvas');

  // 1. 创建一个webgl对象
  const gl = canvas.getContext('webgl');

  // 2.创建webgl程序
  // (1).编写两个着色器
  // const vertex = `
  //   attribute vec2 position;

  //   void main() {
  //     gl_PointSize = 1.0;
  //     gl_Position = vec4(position * 0.5, 1.0, 1.0);
  //   }
  // `;

  // const fragment = `
  //   precision mediump float;
  //   void main() {
  //     gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  //   }
  // `;

  const vertex = `
    attribute vec2 position;
    varying vec3 color;

    void main() {
      gl_PointSize = 1.0;
      color = vec3(0.5 + position * 0.5, 0.0);
      gl_Position = vec4(position * 0.5, 1.0, 1.0);
    }
  `;

  const fragment = `
    precision mediump float;
    varying vec3 color;
    void main() {
      gl_FragColor = vec4(color, 1.0);
    }
  `;

  // (2). 将顶点着色器和片元着色器分别创建成shader对象
  const vertexShader = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(vertexShader, vertex);
  gl.compileShader(vertexShader);

  const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(fragmentShader, fragment);
  gl.compileShader(fragmentShader);

  // (3). 创建WebGLProgram对象 将两个shader关联到WebGL上
  const program = gl.createProgram();
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);

  gl.linkProgram(program);

  // (4). 启用WebGLProgram对象
  gl.useProgram(program);

  // 3.将数据存入缓冲区
  // （webgl使用类型数组定义 默认 Float32Array）
  const points = new Float32Array([-1, -1, 0, 1, 1, -1]);
  // （将定义好的数据写入webgl缓冲区）
  const bufferId = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);
  gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);

  // 4.将缓冲数据读取到GPU
  const vPosition = gl.getAttribLocation(program, 'position');// 获取顶点着色器的postion
  gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);// 给变量定义长度和类型
  gl.enableVertexAttribArray(vPosition);// 激活这个变量

  // 5.执行着色器完成控制
  // （调用绘图指令完成绘图）
  gl.clear(gl.COLOR_BUFFER_BIT);

  // gl.TRIANGLES 实心三角形 gl.LINE_LOOP 回路
  gl.drawArrays(gl.LINE_LOOP, 0, points.length / 2);

</script>

</html>